import { FC, useState, useEffect } from "react"
import styles from "./patient.less"
import { Button, Input, Select, Table, Radio, message } from "antd"
import { ColumnsType } from "antd/es/table"
const { Option } = Select
import { history } from "umi"
import { patientList, Ipatient, IPatientParmas } from "@/services/patient"
import { getEnum, enumTypeList, ITypeEnum } from "@/services/common"
import { PAGESIZE, PAGE } from "@/configs/instance"



/**
   * 跳转详情
   */

const getHospitalizedInfo = (col: any) => {
  console.log(col)
  history.push({
    pathname: "/patientManagement/hospitalizedInfo",
    query: {
      id: col.id,
    },
  })
}

/**
   * 添加患者
   */

const getAddPatient = () => {
  history.push({
    pathname: "/patientManagement/addAndEditPatient",
  })

}



const patient: FC = () => {
  const columns: ColumnsType<Ipatient> = [
    {
      title: "序号",
      align: "center",
      width: "57",
      render: (_, __, index) => {
        // 生成序号
        return (
          <span>{(current - PAGE) * size + (index + 1)}</span>
        )
      },
    },
    {
      title: "患者姓名",
      dataIndex: "name",
      key: "name",
      align: "center",
      width: "auto",
    },
    {
      title: "科室",
      dataIndex: "dept",
      key: "dept",
      align: "center",
      width: "auto",
    },
    {
      title: "主要诊断",
      dataIndex: "diagnosis",
      key: "diagnosis",
      align: "center",
      width: "auto",
    },
    {
      title: "门诊号/住院号",
      dataIndex: "outpatientHospitalized",
      key: "outpatientHospitalized",
      align: "center",
      width: "auto",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
      align: "center",
      width: "auto",
      render: (_, col: Ipatient, index) => {
        // 生成序号
        return (
          <span>{col.sex === 1 ? "男" : "女"}</span>
        )
      },
    },
    {
      title: "手机号码",
      dataIndex: "phone",
      key: "phone",
      align: "center",
      width: "auto",
    },
    {
      title: "就诊时间",
      dataIndex: "patientTime",
      key: "patientTime",
      align: "center",
      width: "auto",
    },
    {
      title: "患者ID",
      dataIndex: "patientId",
      key: "patientId",
      align: "center",
      width: "auto",
    },
    {
      title: "操作",
      align: "center",
      width: "auto",
      render: (col: any) => {
        return (
          <div className={styles.editBox}>
            <div className={styles.bt1} onClick={() => { getHospitalizedInfo(col) }} >查看</div>
          </div>
        )
      }
    }

  ]


  const [loading, setLoading] = useState<boolean>(true)
  const [current, setCurrent] = useState<number>(PAGE)
  const [size, setSize] = useState<number>(PAGESIZE)
  const [patients, setPatients] = useState<Array<Ipatient>>([])
  const [total, setTotal] = useState<number>(0)
  const [type, setType] = useState<number>(1)// 患者门诊类型
  const [typeList, setTypeList] = useState<Array<ITypeEnum>>([])// 患者门诊列表
  const [deptCode, setDeptCode] = useState<number>(-100)// 患者科室类型
  const [deptCodeList, setDeptCodeList] = useState<Array<ITypeEnum>>([])// 患者科室列表
  const [name, setName] = useState<string>("")// 患者姓名
  /**
   * 获取患者列表
   */
  const getPatientList = async () => {
    setLoading(true)
    let parms: IPatientParmas = {
      current, size
    };
    (name && name !== "") && (parms.name = name);
    (type && type !== -100) && (parms.type = type);
    (deptCode && deptCode !== -100) && (parms.deptCode = deptCode)
    patientList({ ...parms }).then((res: any) => {
      (res.data) && (setPatients(res.data.records));
      (res.data) && (setTotal(res.data.total))
      setLoading(false)
    }).catch((error: any) => {
      setLoading(false)
      message.error(error.data ? error.data.message : "发出的请求是不存在的记录或服务器没有进行操作")
    })
  }

  /**
  * 获取住院类型与科室类型
  */
  const getStateList = () => {
    // 患者住院类型
    getEnum(enumTypeList.patientType, false).then(res => {
      console.log(res);
      (res.data) && (setTypeList(res.data))
    })
    // 科室类型
    getEnum(enumTypeList.deptType, true).then(res => {
      console.log(res);
      (res.data) && (setDeptCodeList(res.data))
    })
  }


  /**
   * 修改页码
   */
  const changeSize = (current: number, size?: number) => {
    (size) && (setSize(size))
    setCurrent(current)
    getPatientList()

  }


  /**
   * 搜索 search
   */
  const searchRecordList = () => {
    setSize(PAGESIZE)
    setCurrent(PAGE)
    getPatientList()
  }


  /**
   * 重置
   */
  const reset = () => {
    setSize(PAGESIZE)
    setCurrent(PAGE)
    setName("")
    setDeptCode(-100)
    getPatientList()

  }

  useEffect(() => {
    getPatientList()
    getStateList()
  }, [])

  return (
    <div className={styles.patientBox}>
      <div className={styles.top}>
        <Button className={styles.addPatient} onClick={() => { getAddPatient() }}>添加患者</Button>
        <div className={styles.flex1} />
        <Input className={styles.patientName} value={name} placeholder="请输入用户名称" onChange={(e) => { setName(e.target.value) }} />
        <Button className={styles.search} onClick={() => { searchRecordList() }}>搜索</Button>
        <Button className={styles.reset} onClick={() => { reset() }}>重置</Button>
      </div>
      <div className={styles.patientMainBox}>
        <div className={styles.patientMain}>
          <div className={styles.selectTypeBox}>
            <Radio.Group className={styles.radioGroupList} value={type} onChange={(e: any) => { setType(e.target.value) }}>
              {
                typeList.map((item: ITypeEnum) => {
                  return <Radio value={item.value} key={item.value} >{item.str}</Radio>
                })
              }
            </Radio.Group>
            <Select className={styles.selectItemList} defaultValue={deptCode} style={{ width: 120 }}>
              {
                deptCodeList.map((item) => {
                  return <Option key={item.value} value={item.value}>{item.str}</Option>
                })
              }
            </Select>
          </div>
          <Table
            loading={loading}
            bordered
            rowKey='id'
            className={styles.consultationTable}
            columns={columns}
            dataSource={patients}
            pagination={{
              current: current,
              pageSize: size,
              total: total,
              onChange: (page: number, pageSize?: number) => { changeSize(page, pageSize) },
              showQuickJumper: true,
              style: { paddingRight: 30 }
            }}
          />
        </div>

      </div>

    </div >
  )

}

export default patient
